import React, { useState, useEffect } from 'react';
import { RankItemStyled } from './style';
import top1 from '@/assets/images/TOP1.png';
import top2 from '@/assets/images/TOP2.png';
import top3 from '@/assets/images/TOP3.png';
import { toThousands } from '@/utils/tools/common';
import { ListType } from '../..';

interface RankItemProps {
  itemInfo: ListType;
  maxNum: number;
}

const RankItem: React.FC<RankItemProps> = (props) => {
  const [widthPercent, setWidthPercent] = useState<number>(0);
  useEffect(() => {
    let percent = props.itemInfo.number / props.maxNum;
    setWidthPercent(parseFloat(percent.toFixed(4)));
  }, []);

  return (
    <RankItemStyled widthPercent={widthPercent}>
      <div className='rank-item-left'>
        {props.itemInfo?.rank > 3 ? (
          <span>{props.itemInfo.rank}</span>
        ) : (
          <img src={props.itemInfo?.rank === 1 ? top1 : props.itemInfo?.rank === 2 ? top2 : top3} alt='' />
        )}
      </div>
      <div className='rank-item-middle'>
        <div className='middle-top'>{props.itemInfo?.name}</div>
        <div className='middle-bottom'></div>
      </div>
      <div className='rank-item-right'>{toThousands(props.itemInfo?.number)}</div>
    </RankItemStyled>
  );
};

export default RankItem;
